<script lang="ts" setup>
import { getOSSURL } from "@/utils/utils";

const imgs = {
  swiper: [
    "cgguanwang/202106240153139318510.jpg",
    "cgguanwang/202106240153152220987.jpg",
    "cgguanwang/202106240153144631636.jpg",
    "cgguanwang/202106240153142212086.jpg",
  ],
  others: [
    "cgguanwang/202106240153149623868.jpg",
    "cgguanwang/202106240153143134994.jpg",
    "cgguanwang/202106240153142012545.jpg",
    "cgguanwang/202106240153146644513.jpg",
    "cgguanwang/202106240153141935554.jpg",
    "cgguanwang/202106240153143844889.jpg",
    "cgguanwang/202106240153142437710.jpg",
    "cgguanwang/202106240153144794105.jpg",
  ],
};

const showPreview = ref(false);
const imgData: { src: string }[] = Object.values(imgs)
  .flat()
  .map((item) => ({
    src: getOSSURL(item),
  }));
const hideFn = () => (showPreview.value = false);

const videoSource = {
  src: getOSSURL("/imgs/h5-news/video/宣传视频.mp4"),
  type: "video/mp4",
};
</script>

<template>
  <!-- 顶部视频 -->
  <div>
    <nut-video :source="videoSource" :options="{ controls: true }"></nut-video>
    <!-- <video controls :src="getOSSURL('/imgs/h5-news/video/宣传视频.mp4')"></video> -->
  </div>

  <!-- 轮播图 -->
  <h2 class="p-5 bg-white text-2xl c-sky-7">驾校环境</h2>
  <nut-swiper class="h-56" width="320" :init-page="0" :pagination-visible="true" pagination-color="#426543">
    <nut-swiper-item v-for="item in imgs.swiper" :key="item">
      <div class="h-56 px-3 py-5">
        <div class="h-full rd-2 of-hidden shadow-lg">
          <img class="h-full w-full object-cover" :src="getOSSURL(item)" @click="showPreview = true" />
        </div>
      </div>
    </nut-swiper-item>
  </nut-swiper>

  <!-- 网格布局展示图片 -->
  <div class="grid grid-cols-2 gap-4 p-3">
    <div v-for="item in imgs.others" class="flex flex-col gap-2 bg-white rd-2 of-hidden shadow" @click="showPreview = true">
      <div class="h-28">
        <img class="h-full w-full object-cover" :src="getOSSURL(item)" alt="" />
      </div>
      <div class="pb-2 px-2 text-center">
        <p>教学环境</p>
      </div>
    </div>
  </div>

  <!-- 图片预览 -->
  <nut-image-preview :show="showPreview" :images="imgData" @close="hideFn" />
</template>
